/*
参数说明：
alertShow-弹出框参数{
  showmsg-服务器弹窗提示
  msg-服务器提示内容
}
  itemTypeList-标头Type切换数组
  subjectList-商品专题数组
bannerList-banner图片数组{
  url-图片跳转地址
  img-图片地址
  title-标题
}
方法:
getBannerList-(因组件bannerList参数固定为url、img、title所以需我们转换一次)
onShow-弹窗框弹出时触发的方法
onHide-弹窗框关闭时触发的方法
*/
<template>
  <div>
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <x-header style="background-color:#3d82e5;width:100%;position:absolute;left:0;top:0;z-index:100;text-align: center" :left-options="{showBack: false}">
      <p name="content" style="margin-left: -12px">商城</p>
      <!--<a slot="left" href="javascript:;" style="color: #ffffff" @click="addressFn" >-->
        <!--<p name="leftContent">四川▼</p>-->
      <!--</a>-->
      <div slot="right"  @click="searchFn" style="color: #ffffff" >
        <img  src="../../../../src/assets/images/shopMall/icon_ss_nor.png" height="20px" width="20px"/>
      </div>
    </x-header>
    <div :style="boxStyle">
      <div style="position: relative">
        <div style="width: 100%;overflow:auto;-webkit-overflow-scrolling:touch;padding-top: 38px;" align="center" class="yuhua">
          <table>
            <tr>
              <td v-for="item in itemTypeList" class="tdClass" :id="item.id + 'td' " @click="specialFn(item.id)">
                <span  style="color: #3d82e5;font-size: 14px">{{item.name}}</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div style="margin-top: 67px">
        <swiper :height=imgHw dots-position="center" auto  show-desc-mask="false">
          <swiper-item v-for="bannerList in bannerList">
            <img :src=bannerList.img alt="" style="width: 100%;" @click="fromBanner(bannerList.kind,bannerList.kindId,bannerList.url)">
          </swiper-item>
        </swiper>
      </div>
      <flexbox :gutter="0" style="background: #fff;">
        <flexbox-item>
          <div style="height: 45px;">
            <p style="display: inline-block;padding-right: 10px;border-right: 1px solid #bcbcbc;font-size: 15px;color: #333;margin-left: 20px;font-weight: bold;">活动</p>
            <p style="display: inline-block;font-size: 14px;padding-left: 5px;margin-top: 12px">特惠活动火热进行中</p>
          </div>
        </flexbox-item>
      </flexbox>
      <div v-for="subjectitem in subjectList">
        <div style="font-size: 0;" v-for="subjectUrl in subjectitem.url">
          <img @click="shopSpecialFn(subjectitem.id)" :src="subjectUrl"  style="width:100%;" alt="专题图片">
        </div>
      </div>
      <flexbox :gutter="0" style="background: #fff;">
        <flexbox-item>
          <div style="height: 45px;">
            <p style="display: inline-block;padding-right: 10px;border-right: 1px solid #bcbcbc;font-size: 15px;color: #333;margin-left: 20px;font-weight: bold;">精选</p>
            <p style="display: inline-block;font-size: 14px;padding-left: 5px;margin-top: 12px">中老年专享的精致好物</p>
          </div>
        </flexbox-item>
      </flexbox>
      <div style="text-align: center;font-size: 0;">
        <div>
          <img @click="shopListFn(1)" src="../../../../src/assets/images/shopMall/shopMainimg1.jpg" style="width:100%;">
        </div>
        <div style="margin-top: 5px;margin-bottom: 20px">
          <img @click="shopListFn(2)" src="../../../../src/assets/images/shopMall/shopMainimg2.jpg" style="width:100%;">
        </div>
      </div>
    </div>
  </div>
</template>



<script>
  import { Swiper, Tab, TabItem, Card, Flexbox, FlexboxItem, FormPreview, XButton, Alert, Divider, XHeader, SwiperItem } from 'vux'
  import YqHeader from '../../../components/YqHeader.vue'
  import * as urls from '../../../api/urls'
  import $ from 'jquery'

  export default {
    components: {
      Swiper,
      Tab,
      TabItem,
      YqHeader,
      Card,
      Flexbox,
      FlexboxItem,
      FormPreview,
      XButton,
      Alert,
      Divider,
      XHeader,
      SwiperItem
    },
    mounted: function () {
      document.getElementsByClassName('weui_tab_bd')[0].style.overflowY = 'hidden'
      this.boxStyle = 'overflow-x: hidden;overflow-y: scroll;height: ' + (document.body.clientHeight - 38) + 'px;'
      let width = document.body.clientWidth
      let heigth = (parseInt(width) / 100) * 60
      this.imgHw = heigth + 'px'
      if (window.sessionStorage.getItem('userId') === '' || window.sessionStorage.getItem('userId') === null || window.sessionStorage.getItem('userId') === undefined) {
        this.userId = this.getQueryString('userId')
        if (this.userId !== '' && this.userId !== null && this.userId !== undefined) {
          window.sessionStorage.setItem('userId', this.userId)
          this.getBannerList()
          this.getItemTypeList()
          this.getLogo()
        } else {
          let url = this.$store.state.empower.url
          window.location.href = url + '/api/wxAuth/index?type=t1'
        }
      } else {
        this.userId = window.sessionStorage.getItem('userId')
        this.getBannerList()
        this.getItemTypeList()
        this.getLogo()
      }
//      this.$nextTick(function () {
//        this.$root.$el.__vue__.$data.index = 1
//        this.$root.$el.__vue__.$data.isSel1 = false
//        this.$root.$el.__vue__.$data.isSel2 = true
//        this.$root.$el.__vue__.$data.isSel3 = false
//        this.$root.$el.__vue__.$data.isSel4 = false
//      })
    },
    data () {
      return {
        demo06_index: 0,
        index: 0,
        demo2: '美食',
        list2: ['精选', '美食', '电影', '酒店', '外卖'],
        boxStyle: '',
        userId: '',
        alertShow: {
          showmsg: false,
          msg: ''
        },
        imgHw: '',
        itemTypeList: [],
        subjectList: [],
        bannerList: [],
        pic: ['https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg', 'https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg', 'https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg']
      }
    },
    methods: {
      fromBanner (kind, kindId, url) {
        if (kind === 1) {
//          console.log('商品详情')
          window.sessionStorage.setItem('shopId', kindId)
          let userId = window.sessionStorage.getItem('userId')
          window.sessionStorage.setItem('userId', userId)
          window.location.href = '/api/wxAuth/go/ShopInfo_id=' + kindId + '&userId=' + userId
        }
        if (kind === 2) {
//          console.log('分类专题详情')
          let userId = window.sessionStorage.getItem('userId')
          window.location.href = '/api/wxAuth/go/typeSpecial_id=' + kindId + '&userId=' + userId
        }
        if (kind === 3) {
//          console.log('自定义专题详情')
          let userId = window.sessionStorage.getItem('userId')
          window.location.href = '/api/wxAuth/go/shopSpecial_id=' + kindId + '&userId=' + userId
        }
        if (kind === 4) {
//          console.log('无跳转')
        }
        if (kind === 5) {
//          console.log('其他')
          window.location.href = url
        }
      },
      getLogo () {
        // 获取logo
        let that = this
        this.http(urls.getLogo, {}, function (res) {
          if (res.status === 100) {
            if (res.data !== null) {
//              that.$store.commit(types.EMPOWER, {logo: res.data.logo})
              window.sessionStorage.setItem('LOGO', res.data.logo)
            }
            that.weixinfn31()
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      weixinfn31 () {
        let userId = window.sessionStorage.getItem('userId')
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        this.weixin(url, link)
      },
      demo06_onIndexChange (index) {
        this.demo06_index = index
      },
      getBannerList () {
        this.$root.$el.__vue__.setSel()
        let userId = window.sessionStorage.getItem('userId')
        let that = this
        this.http(urls.shopBanner, {userId: userId}, function (res) {
          if (res.status === 100) {
            if (res.data.list.length !== 0) {
              for (let i = 0; i < res.data.list.length; i++) {
                let bannerObj = {}
                bannerObj.url = res.data.list[i].forwardUrl
                bannerObj.img = res.data.list[i].bannerUrl
                bannerObj.kind = res.data.list[i].kind
                bannerObj.kindId = res.data.list[i].kindId
                that.bannerList.push(bannerObj)
              }
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      getItemTypeList () {
        let that = this
        this.http(urls.shopItemType, {}, function (res) {
          if (res.status === 100) {
            if (res.data.subjectListTop.length !== 0) {
              that.itemTypeList = res.data.subjectListTop
            }
            if (res.data.subjectListButtum.length !== 0) {
              that.subjectList = res.data.subjectListButtum
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      specialFn (id) {
        let ID = id + 'td'
        $('#' + ID).attr('style', 'border-bottom: 1px solid #3d82e5')
        setTimeout(() => {
          let userId = window.sessionStorage.getItem('userId')
          window.location.href = '/api/wxAuth/go/typeSpecial_id=' + id + '&userId=' + userId
//          this.$router.push({
//            path: '/typeSpecial',
//            query: {
//              id: id
//            }
//          })
//          this.$router.go(1)
        }, 500)
      },
      shopSpecialFn (id) {
        let userId = window.sessionStorage.getItem('userId')
        window.location.href = '/api/wxAuth/go/shopSpecial_id=' + id + '&userId=' + userId
      },
      addressFn () {
        this.$router.push({
          path: '/ChinaAddress'
        })
        this.$router.go(1)
      },
      searchFn () {
        let userId = window.sessionStorage.getItem('userId')
        window.sessionStorage.setItem('SearchShow', 'false')
        window.sessionStorage.setItem('valueName', '')
        window.sessionStorage.setItem('currentPage', '1')
        window.sessionStorage.setItem('scrollTop', 0)
        window.sessionStorage.setItem('order', '')
        window.sessionStorage.setItem('typeNumber', 1)
        window.sessionStorage.setItem('priceItemType', 2)
        window.location.href = '/api/wxAuth/go/SearchShop_userId=' + userId
//        this.$router.push({
//          path: '/SearchShop'
//        })
//        this.$router.go(1)
      },
      shopListFn (shopType) {
        window.sessionStorage.setItem('SearchShow', 'false')
        window.sessionStorage.setItem('currentPage', '1')
        window.sessionStorage.setItem('scrollTop', 0)
        window.sessionStorage.setItem('order', '')
        window.sessionStorage.setItem('typeNumber', 1)
        window.sessionStorage.setItem('priceItemType', 2)
        let userId = window.sessionStorage.getItem('userId')
        window.location.href = '/api/wxAuth/go/shoppingMall+serviceShopList_type=' + shopType + '&userId=' + userId
//        this.$router.push({
//          path: '/shoppingMall/serviceShopList',
//          query: {
//            shopType: shopType
//          }
//        })
        this.$router.go(1)
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      },
      getQueryString (name) {
        let userId = window.location.href.substr('userId='.length + window.location.href.indexOf('?') + 1, window.location.href.length)
        return userId
      }
    }
  }
</script>
<style scoped="scoped">
  .tdClass{
    padding: 0 15px 0 15px;
    word-break: keep-all;
    white-space:nowrap;
  }
  .yuhua{
    position: absolute;
    z-index: 98;
    color: #abc;
    -webkit-box-shadow: 0 0 15px #d6d6d6;
    -moz-box-shadow: 0 0 15px #d6d6d6;
    box-shadow: 0 0 15px #d6d6d6;
  }
</style>
